<template>
	<view class="my">
		<scroll-view scroll-y class="scrollPage">
			<view class="UCenter-bg" :style="'background-image: url('+pic[topBackGroupImageIndex].link+');'">
				<view class="space" :hidden="!spaceShow">
					<view class="stars">
						<view class="star"></view>
						<view class="star pink"></view>
						<view class="star blue"></view>
						<view class="star yellow"></view>
					</view>
				</view>
				<block v-if="!hasUserInfo">
					<button v-if="canIUseGetUserProfile" @tap="getUserProfile"> 获取头像昵称 </button>
					<button v-else open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true"
						class='cu-btn round bg-green shadow'>
						获取头像昵称 </button>
				</block>
				<block v-else>
					<image :src="!!userInfo.user_cover?userInfo.user_cover:(imgUrl+user_photo)" class="user_png"
						mode="widthFix"></image>
					<view class="text-blue text-bold text-xl">{{userInfo.user_name}}
						<!-- <text class="text-df">{{version}}</text> -->
					</view>
					<view class="text-blue text-bold margin-top-sm">
						<text>{{blogName}}{{version}}</text>
					</view>
				</block>
				<image :src="imgUrl+'static/wave.gif'" mode="scaleToFill" class="gif-wave"></image>
			</view>

			<view class="cu-list grid col-4 no-border ">

				<view class="cu-item">
					<navigator class="content" url="../temp/like" hover-class="none">
						<view class='cuIcon-likefill text-red'>
						</view>
						<text>我的喜欢</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator class="content" url="../temp/collection?type=1" hover-class="none">
						<view class='cuIcon-favorfill text-blue'>
						</view>
						<text>我的收藏</text>
					</navigator>
				</view>
				<view class="cu-item">
					<navigator class="content" url="../temp/comment" hover-class="none">
						<view class='cuIcon-commentfill text-purple'>
						</view>
						<text>我的评论</text>
					</navigator>
				</view>

				<view class="cu-item">
					<navigator class="content" url="../temp/flash" hover-class="none">
						<view class='cuIcon-noticefill text-green text-shadow'>
							<view class="cu-tag badge" v-if='isnew'>
							</view>
						</view>
						<text>我的消息</text>
					</navigator>
				</view>
			</view>
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
				<view class="cu-item" @click="showModal" data-target="Modal">
					<view class="content">
						<image class="png" mode="aspectFit" src="../../static/me/icon/zhuti.png"></image>
						<text class="text-lg margin-sm">主题切换</text>
					</view>
					<view class="action">
						<view class="cu-capsule radius">
							<view class="cu-tag bg-gradual-blue">
								<view style="clear:both;"></view>
							</view>
							<view class="cu-tag line-blue">{{picName}}</view>
						</view>
					</view>
				</view>
				 <view class="cu-item">
						<button class="content cu-btn" openType="share">
								<image class="png" mode="aspectFit" src="../../static/me/icon/lvhang.png"></image>
								<text class="text-lg margin-sm">分享小程序</text>
						</button>
				</view>
				<view class="cu-item">
					<!-- <navigator class="content" url="../mine/issue" hover-class="none">
							<image class="png" mode="aspectFit" src="../../static/me/icon/chucuo.png"></image>
						<text class="text-lg margin-sm ">问题反馈</text>
					</navigator> -->
					<button class='cu-btn content' open-type='feedback'>
						<image class="png" mode="aspectFit" src="../../static/me/icon/chucuo.png"></image>
						<text class='text-lg margin-sm '>意见反馈</text>
					</button>
				</view>
				
				<view class="cu-item">
					<navigator class="content" url="../mine/resume" hover-class="none">
						<image class="png" mode="aspectFit" src="../../static/me/icon/xiaoxi.png"></image>
						 <text class="text-lg margin-sm">关于作者</text>
					</navigator>
				</view>
				
				<view class="cu-item">
					<navigator class="content" url="../mine/salary" hover-class="none">
						<image class="png" mode="aspectFit" src="../../static/me/icon/jisuanqi.png"></image>
						<text class="text-lg margin-sm">薪资排名</text>
					</navigator>
				</view>
				
				<view class="cu-item">
					<view class="content" @click="copyLink" data-link="https://github.com/Junquan-Guo">
						<text class="cuIcon-github text-grey"></text>
						<text class="text-grey">GitHub</text>
					</view>
					<view class="action">
							<view class="cu-tag round bg-orange light">技术</view>
							<view class="cu-tag round bg-olive light">菜鸟</view>
							<view class="cu-tag round bg-blue light">扯蛋</view>
					</view>
				</view>
				
				<view class="cu-item arrow">
					<view class="content" @click="showQrcode(this)">
						<text class="cuIcon-refund text-red"></text>
						<text class="text-grey">赞赏支持</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<button class="cu-btn content" open-type="contact">
						<text class="cuIcon-servicefill text-cyan"></text>
						<text class="text-grey">客服反馈</text>
					</button>
				</view>
			</view>

			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
				<view class="cu-item arrow">
					<navigator class="content" url="../mine/release" hover-class="none">
						<text class="cuIcon-formfill text-blue"></text>
						<text class="text-grey">历史版本</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<navigator class="content" url="../mine/notice" hover-class="none">
						<text class="cuIcon-writefill text-cyan"></text>
						<text class="text-grey">消息通知</text>
					</navigator>
				</view>
				<view class="cu-item arrow">
					<navigator class="content" url="../admin/index" hover-class="none">
						<text class="cuIcon-settings text-gary"></text>
						<text class="text-grey">后台管理</text>
					</navigator>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
		<view :class="modalName=='Modal'?'cu-modal show':'cu-modal'">
			<view class="cu-dialog">
				<view class="modal_bg"></view>
				<view class="modal_main">
					<view class="nav-list margin-top">
						<view v-for="(item,index) in inter" @tap="switchImage(index,item.name)"
							:class="'nav-li bg-zt'+(index+1)" :key="index">
							<view class="nav-name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<navigator appId="wx5211b6c0da1a64c2"  hoverClass="none" target="miniProgram" version="release">
			<view class="dong">
				<view class="monster">
					<view class="monster__face">
						<view class="monster__eye avatar-eye avatar-eye--green eye--left">
							<view class="avatar-eye-pupil pupil--green">
								<label class="avatar-eye-pupil-blackThing _span">
									<label class="avatar-eye-pupil-lightReflection _span"></label>
								</label>
							</view>
						</view>
						<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
							<view class="avatar-eye-pupil pupil--pink">
								<label class="avatar-eye-pupil-blackThing _span">
									<label class="avatar-eye-pupil-lightReflection _span"></label>
								</label>
							</view>
						</view>
						<view class="monster__noses">
							<view class="monster__nose"></view>
							<view class="monster__nose"></view>
						</view>
						<view class="monster__mouth">
							<view class="monster__top"></view>
							<view class="monster__bottom"></view>
						</view>
					</view>
				</view>
			</view>
		</navigator>
	</view>
</template>

<script>
	import api from '../../utils/api.js';
	const db = wx.cloud.database();
	export default {
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				user_photo: getApp().globalData.user_photo,
				admire: getApp().globalData.admire, //赞赏图
				version: getApp().globalData.version,
				blogName: getApp().globalData.blogName,
				// userInfo: getApp().globalData.userInfo||{},
				// hasUserInfo: getApp().globalData.hasUserInfo||false,
				canIUseGetUserProfile: uni.canIUse('getUserProfile'),
				canIUseInfo: uni.canIUse('button.open-type.getUserInfo'), //判断应用的 API，回调，参数，组件等是否在当前版本可用。
				isnew: false,
				modalName: null,
				topBackGroupImageIndex: 5,
				picName: "流星之夜",
				spaceShow: !0,
				inter: [{
					title: "mimicry",
					name: "活力春天",
					color: ""
				}, {
					title: "theme",
					name: "清爽夏日",
					color: ""
				}, {
					title: "theme",
					name: "金秋之韵",
					color: ""
				}, {
					title: "theme",
					name: "冬日之阳",
					color: ""
				}, {
					title: "theme",
					name: "幽兰星空",
					color: ""
				}, {
					title: "theme",
					name: "流星之夜",
					color: ""
				}],
				pic: [{
					link: "https://cdn.zhoukaiwen.com/zjx_me_bg1.jpeg",
					name: "春天"
				}, {
					link: "https://cdn.zhoukaiwen.com/zjx_me_bg2.jpeg",
					name: "夏天"
				}, {
					link: "https://cdn.zhoukaiwen.com/zjx_me_bg3.jpeg",
					name: "秋天"
				}, {
					link: "https://cdn.zhoukaiwen.com/zjx_me_bg4.jpeg",
					name: "冬天"
				}, {
					link: "https://cdn.zhoukaiwen.com/zjx_me_bg5.jpeg",
					name: "幽静"
				}, {
					link: "https://cdn.zhoukaiwen.com/zjx_me_bg6.jpg",
					name: "天空"
				}],
			}
		},
		options: {
			addGlobalClass: true,
		},
		props: ['userInfo', 'hasUserInfo'],
		onShareAppMessage: function(e) {
				return {
						title: "看看这个小程序多好玩～"
				};
		},
		watch: {
			topBackGroupImageIndex: function(e) {
				this.spaceShow = 4 == e || 5 == e;
			}
		},
		created: function() {

		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: async function(options) {
			let showRedDot = uni.getStorageSync('showRedDot');
			that.showRedDot = showRedDot;
		},
		methods: {
			callPhoneNumber: function() {
					uni.makePhoneCall({
							phoneNumber: "15914967410"
					});
			},
			switchImage: function(index, name) {
				this.topBackGroupImageIndex = index;
				this.modalName = null;
				this.picName = name;
			},
			showModal: function(e) {
				this.modalName = e.currentTarget.dataset.target;
			},
			copyLink: function(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.link,
					success: res => {
						uni.showToast({
							title: '已复制',
							duration: 1000,
						})
					}
				})
			},
			showQrcode: function() {
				uni.previewImage({
					urls: [`${this.imgUrl}${this.admire}`],
					current: `${this.imgUrl}${this.admire}` // 当前显示图片的http链接      
				})
			},
			getUser: function() {
				let _this = this;
				uni.vibrateShort({})
				// 调用云函数
				wx.cloud.callFunction({
					name: 'login',
					data: {},
					success: res => {
						//查看用户是否注册过了
						db.collection('user').where({
							user_id: res.result.openid, // 填入当前用户 openid
						}).get().then(re => {
							if (re.data.length > 0) {
								//已经保存过用户信息
								// console.log("该微信用户已授权！！！")
								uni.getUserInfo({
									success: function(r) {
										//保存
										db.collection('user').where({
											user_id: res.result.openid
										}).update({
											data: {
												user_name: r.userInfo.nickName,
												user_cover: r.userInfo
													.avatarUrl,
												user_gender: r.userInfo.gender,
												user_province: r.userInfo
													.province,
												user_city: r.userInfo.city,
												user_country: r.userInfo
													.country,
											}
										})
									}
								})
							} else {
								//未保存获取用户信息
								uni.getUserInfo({
									success: function(r) {
										//保存
										let join_date = new Date().getTime();
										db.collection('user').add({
												// data 字段表示需新增的 JSON 数据
												data: {
													user_id: res.result.openid,
													user_name: r.userInfo.nickName,
													user_cover: r.userInfo
														.avatarUrl,
													user_gender: r.userInfo.gender,
													user_province: r.userInfo
														.province,
													user_city: r.userInfo.city,
													user_country: r.userInfo
														.country,
													join_date: join_date,
												}
											}).then(res => {
												console.log("用户授权成功！！！")
												console.log(res)
											})
											.catch(console.error)
									}
								})
							}

							db.collection('user').where({
								user_id: res.result.openid // 填入当前用户 openid
							}).get().then(rs => {
								getApp().globalData.userInfo = rs.data[0];
								getApp().globalData.hasUserInfo = true;
							})
							this.$emit('childByValue', {
								userInfo: re.data[0],
								hasUserInfo: true
							})
							wx.hideLoading();
						})
					},
					fail: err => {
						console.error('[云函数] [login] 调用失败', err)
					}
				})
			},
			getUserProfile: async function(e) {
				let _this = this;
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						if (res.errMsg == 'getUserProfile:ok') {
							new Promise(resolve => {
								resolve(api.updateUserInfo(res.userInfo));
							}).then(result => {
								if (result.result.data.length > 0) {
									getApp().globalData.userInfo = result.result.data[0];
									getApp().globalData.hasUserInfo = true;
									_this.$emit('childByValue', {
										userInfo: result.result.data[0],
										hasUserInfo: true
									})
								}
								wx.hideLoading();
							})
						}
					}
				})
			},
			//废弃
			getUserInfo: function(e) {
				if (e.detail.userInfo) {
					this.getUser();
				} else {
					uni.showToast({
						title: '取消授权成功！',
						icon: 'none',
						duration: 2000
					})
				}
			}
		},
	}
</script>

<style>
	.UCenter-bg {
		background-size: cover;
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.user_png {
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}
	
	.name {
	    text-shadow: 2px 2px 1px #2f9bfe;
	}
	
	.cu-dialog {
	    background: #fff;
	    overflow: visible;
	    padding: 300rpx 0 70rpx;
	}
	
	.modal_bg {
	    width: 100%;
	    height: 400rpx;
	    position: absolute;
	    top: -100rpx;
	    background-image: url(http://cdn.zhoukaiwen.com/modal_bg.png);
	    background-size: 100%;
	    background-repeat: no-repeat;
	}
	
	.modal_main {
	    background-color: #fff;
	}
	
	.bg-zt1 {
	    color: #fff;
	    background: #81d949;
	}
	
	.bg-zt2 {
	    color: #fff;
	    background: #b2e6ff;
	}
	
	.bg-zt3 {
	    color: #fff;
	    background: #f3cd41;
	}
	
	.bg-zt4 {
	    color: #fff;
	    background: #ddecf7;
	}
	
	.bg-zt5 {
	    color: #fff;
	    background: #152e9d;
	}
	
	.bg-zt6 {
	    color: #fff;
	    background: #0f1358;
	}
	
	.nav-list {
	    display: flex;
	    flex-wrap: wrap;
	    padding: 0 40rpx;
	    -webkit-box-pack: justify;
	    justify-content: space-between;
	}
	
	.nav-li {
	    padding: 22rpx;
	    border-radius: 12rpx;
	    width: 45%;
	    margin: 0 2.5% 40rpx;
	    background-image: url();
	    background-size: cover;
	    background-position: 50%;
	    position: relative;
	    z-index: 1;
	}
	
	.nav-li::after {
	    content: "";
	    position: absolute;
	    z-index: -1;
	    background-color: inherit;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    bottom: -10%;
	    border-radius: 10rpx;
	    opacity: .2;
	    transform: scale(.9,.9);
	}
	
	.nav-li.cur {
	    color: #fff;
	    background: #5eb95e;
	    box-shadow: 4rpx 4rpx 6rpx rgba(94,185,94,.4);
	}
	
	.nav-name {
	    font-size: 28rpx;
	    text-transform: Capitalize;
	    position: relative;
	}
	
	.nav-name::before {
	    width: 40rpx;
	    height: 6rpx;
	    right: 0;
	    opacity: .5;
	}
	
	.nav-name::after,.nav-name::before {
	    content: "";
	    position: absolute;
	    display: block;
	    background: #fff;
	    bottom: 0;
	}
	
	.nav-name::after {
	    width: 100rpx;
	    height: 1px;
	    right: 40rpx;
	    opacity: .3;
	}
	
	.nav-name::first-letter {
	    font-weight: 700;
	    font-size: 36rpx;
	    margin-right: 1px;
	}
	
	.nav-li text {
	    position: absolute;
	    right: 30rpx;
	    top: 30rpx;
	    font-size: 52rpx;
	    width: 60rpx;
	    height: 60rpx;
	    text-align: center;
	    line-height: 60rpx;
	}
	
	.dong {
	    z-index: 9999;
	    position: fixed;
	    top: -40px;
	    right: -80px;
	    transform: scale(.24);
	}
	
	.monster {
	    transform: rotate(-50deg);
	    position: relative;
	    width: 170px;
	    height: 400px;
	    border-top-left-radius: 200px;
	    border-top-right-radius: 200px;
	    background-color: #3c47d7;
	    box-shadow: 20px 20px 60px #4650e5;
	}
	
	.monster,.monster__face {
	    display: flex;
	    -webkit-box-pack: center;
	    justify-content: center;
	}
	
	.monster__face {
	    -webkit-box-align: center;
	    align-items: center;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    flex-direction: column;
	    position: absolute;
	    top: 14%;
	    width: 75%;
	    height: 160px;
	}
	
	.monster__noses {
	    top: 50%;
	    display: flex;
	    -webkit-box-pack: justify;
	    justify-content: space-between;
	    width: 28%;
	    height: auto;
	    margin-bottom: 10px;
	}
	
	.monster__nose {
	    width: 8px;
	    height: 12px;
	    border-radius: 20px;
	    background: rgba(0,0,0,.5);
	    box-shadow: 4px 8px 5px rgba(0,0,0,.1);
	}
	
	.monster__mouth {
	    display: flex;
	    -webkit-box-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    align-items: center;
	    position: relative;
	    width: 100%;
	    height: 0%;
	    overflow: hidden;
	    border: 25px solid #ffc333;
	    border-radius: 100px;
	    background-color: #810332;
	    animation: mouth 1.75s infinite;
	    box-shadow: 4px 8px 5px rgba(0,0,0,.2);
	    box-sizing: border-box;
	}
	
	.monster__mouth::before {
	    content: "";
	    position: absolute;
	    width: 150px;
	    height: 80px;
	    border-radius: 100px;
	    background-color: #400018;
	}
	
	.monster__mouth:after {
	    content: "";
	    position: absolute;
	    bottom: -80px;
	    width: 160px;
	    height: 80px;
	    border-top-left-radius: 50%;
	    border-top-right-radius: 50%;
	    background-color: #dc1b50;
	    animation: tongue 1.75s infinite;
	}
	
	.monster__top {
	    top: -30px;
	    width: 170px;
	    border-bottom-left-radius: 10px;
	    border-bottom-right-radius: 10px;
	    animation: t 1.75s infinite;
	}
	
	.monster__bottom,.monster__top {
	    position: absolute;
	    height: 30px;
	    background-color: #fff;
	    z-index: 100;
	}
	
	.monster__bottom {
	    bottom: 0;
	    width: 100px;
	    border-top-left-radius: 10px;
	    border-top-right-radius: 10px;
	    animation: b 1.75s infinite;
	}
	
	.avatar-eye {
	    position: absolute;
	    top: -10%;
	    width: 65px;
	    height: 65px;
	    background: linear-gradient(105deg,#fff,#cb87f4);
	    border-radius: 100%;
	    box-shadow: 4px 8px 5px rgba(0,0,0,.2);
	    margin: 3px;
	    transform: translateX(-50%);
	}
	
	.avatar-eye--green {
	    background: -webkit-gradient(linear,left top,left bottom,from(#fdfdfd),to(#c3efea));
	    background: -webkit-linear-gradient(top,#fdfdfd,#c3efea);
	    background: linear-gradient(180deg,#fdfdfd,#c3efea);
	}
	
	.avatar-eye--violet {
	    background: -webkit-gradient(linear,left top,left bottom,from(#fdfdfd),to(#e6d6f6));
	    background: -webkit-linear-gradient(top,#fdfdfd,#e6d6f6);
	    background: linear-gradient(180deg,#fdfdfd,#e6d6f6);
	}
	
	.eye--left {
	    left: 10%;
	}
	
	.eye--right {
	    left: 85%;
	}
	
	.eye--center {
	    left: 45%;
	    top: 10%;
	}
	
	.avatar-eye-pupil {
	    position: absolute;
	    width: 55%;
	    height: 55%;
	    left: 50%;
	    top: 25%;
	    transform: translate(-50%);
	    z-index: 100;
	    border-radius: 100%;
	}
	
	.pupil--green {
	    background: linear-gradient(135deg,rgba(188,248,177,.7),#2fa38c 75%);
	}
	
	.pupil--pink {
	    background: linear-gradient(135deg,#f1a183,#8535cd);
	}
	
	.avatar-eye-pupil-blackThing {
	    width: 55%;
	    height: 55%;
	    left: 50%;
	    top: 25%;
	    background: #2c2f32;
	    box-shadow: 0 0 10px rgba(0,0,0,.2);
	}
	
	.avatar-eye-pupil-blackThing,.avatar-eye-pupil-lightReflection {
	    position: absolute;
	    transform: translate(-50%);
	    border-radius: 100%;
	}
	
	.avatar-eye-pupil-lightReflection {
	    width: 7px;
	    height: 7px;
	    left: 25%;
	    top: 10%;
	    background: #ebebeb;
	    box-shadow: 10px 10px 10px hsla(0,0%,100%,.2);
	}
	
	@-webkit-keyframes t {
	    0%,10%,80%,100% {
	        top: -30px;
	    }
	
	    20% {
	        top: 0;
	    }
	
	    30% {
	        top: -20px;
	    }
	
	    40% {
	        top: 0;
	    }
	
	    50% {
	        top: -25px;
	    }
	
	    70% {
	        top: 0;
	    }
	}
	
	@keyframes t {
	    0%,10%,80%,100% {
	        top: -30px;
	    }
	
	    20% {
	        top: 0;
	    }
	
	    30% {
	        top: -20px;
	    }
	
	    40% {
	        top: 0;
	    }
	
	    50% {
	        top: -25px;
	    }
	
	    70% {
	        top: 0;
	    }
	}
	
	@-webkit-keyframes b {
	    0%,10%,80%,100% {
	        bottom: -30px;
	    }
	
	    20% {
	        bottom: 0;
	    }
	
	    30% {
	        bottom: -20px;
	    }
	
	    40% {
	        bottom: 0;
	    }
	
	    50% {
	        bottom: -25px;
	    }
	
	    70% {
	        bottom: 0;
	    }
	}
	
	@keyframes b {
	    0%,10%,80%,100% {
	        bottom: -30px;
	    }
	
	    20% {
	        bottom: 0;
	    }
	
	    30% {
	        bottom: -20px;
	    }
	
	    40% {
	        bottom: 0;
	    }
	
	    50% {
	        bottom: -25px;
	    }
	
	    70% {
	        bottom: 0;
	    }
	}
	
	@-webkit-keyframes mouth {
	    0%,10%,100% {
	        width: 100%;
	        height: 0%;
	    }
	
	    15% {
	        width: 90%;
	        height: 30%;
	    }
	
	    20% {
	        width: 50%;
	        height: 70%;
	    }
	
	    25% {
	        width: 70%;
	        height: 70%;
	    }
	
	    30% {
	        width: 80%;
	        height: 60%;
	    }
	
	    35% {
	        width: 60%;
	        height: 70%;
	    }
	
	    40% {
	        width: 55%;
	        height: 75%;
	    }
	
	    45% {
	        width: 50%;
	        height: 90%;
	    }
	
	    50% {
	        width: 40%;
	        height: 70%;
	    }
	
	    55% {
	        width: 70%;
	        height: 95%;
	    }
	
	    60% {
	        width: 40%;
	        height: 50%;
	    }
	
	    65% {
	        width: 100%;
	        height: 60%;
	    }
	
	    70% {
	        width: 100%;
	        height: 70%;
	    }
	
	    75% {
	        width: 90%;
	        height: 70%;
	    }
	
	    80% {
	        width: 50%;
	        height: 70%;
	    }
	
	    85% {
	        width: 90%;
	        height: 50%;
	    }
	
	    85% {
	        width: 40%;
	        height: 70%;
	    }
	
	    90% {
	        width: 90%;
	        height: 30%;
	    }
	
	    95% {
	        width: 100%;
	        height: 10%;
	    }
	}
	
	@keyframes mouth {
	    0%,10%,100% {
	        width: 100%;
	        height: 0%;
	    }
	
	    15% {
	        width: 90%;
	        height: 30%;
	    }
	
	    20% {
	        width: 50%;
	        height: 70%;
	    }
	
	    25% {
	        width: 70%;
	        height: 70%;
	    }
	
	    30% {
	        width: 80%;
	        height: 60%;
	    }
	
	    35% {
	        width: 60%;
	        height: 70%;
	    }
	
	    40% {
	        width: 55%;
	        height: 75%;
	    }
	
	    45% {
	        width: 50%;
	        height: 90%;
	    }
	
	    50% {
	        width: 40%;
	        height: 70%;
	    }
	
	    55% {
	        width: 70%;
	        height: 95%;
	    }
	
	    60% {
	        width: 40%;
	        height: 50%;
	    }
	
	    65% {
	        width: 100%;
	        height: 60%;
	    }
	
	    70% {
	        width: 100%;
	        height: 70%;
	    }
	
	    75% {
	        width: 90%;
	        height: 70%;
	    }
	
	    80% {
	        width: 50%;
	        height: 70%;
	    }
	
	    85% {
	        width: 90%;
	        height: 50%;
	    }
	
	    85% {
	        width: 40%;
	        height: 70%;
	    }
	
	    90% {
	        width: 90%;
	        height: 30%;
	    }
	
	    95% {
	        width: 100%;
	        height: 10%;
	    }
	}
	
	@-webkit-keyframes tongue {
	    0%,20%,100% {
	        bottom: -80px;
	    }
	
	    30%,90% {
	        bottom: -40px;
	    }
	
	    40% {
	        bottom: -45px;
	    }
	
	    50% {
	        bottom: -50px;
	    }
	
	    70% {
	        bottom: -80px;
	    }
	
	    90% {
	        bottom: -40px;
	    }
	}
	
	@keyframes tongue {
	    0%,20%,100% {
	        bottom: -80px;
	    }
	
	    30%,90% {
	        bottom: -40px;
	    }
	
	    40% {
	        bottom: -45px;
	    }
	
	    50% {
	        bottom: -50px;
	    }
	
	    70% {
	        bottom: -80px;
	    }
	
	    90% {
	        bottom: -40px;
	    }
	}

	
	.space {
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	
	.star {
	    display: block;
	    width: 5rpx;
	    height: 5rpx;
	    border-radius: 50%;
	    background: #fff;
	    top: 100rpx;
	    left: 400rpx;
	    position: relative;
	    transform-origin: 100% 0;
	    animation: star-ani 6s ease-out infinite;
	    box-shadow: 0 0 5rpx 5rpx hsla(0, 0%, 100%, .3);
	    opacity: 0;
	    z-index: 2;
	}
	
	.star:after {
	    content: "";
	    display: block;
	    top: 0rpx;
	    left: 4rpx;
	    border: 0rpx solid transparent;
	    border-left-color: hsla(0,0%,100%,.3);
	    border-width: 0rpx 90rpx 2rpx;
	    transform: rotate(-45deg) translate3d(1rpx,3rpx,0);
	    box-shadow: 0 0 1rpx 0 hsla(0,0%,100%,.1);
	    transform-origin: 0 100%;
	    animation: shooting-ani 3s ease-out infinite;
	}
	
	.pink {
	    top: 30rpx;
	    left: 395rpx;
	    background: #ff5a99;
	}
	
	.pink,.pink:after {
	    animation-delay: 5s;
	}
	
	.pink:after {
	    border-color: transparent transparent transparent #ff5a99;
	}
	
	.blue {
	    top: 35rpx;
	    left: 432rpx;
	    background: #0ff;
	    -moz-animation-delay: 7s;
	}
	
	.blue,.blue:after {
	    animation-delay: 7s;
	}
	
	.yellow {
	    top: 50rpx;
	    left: 600rpx;
	    background: #ffcd5c;
	    animation-delay: 5.8s;
	}
	
	.yellow:after {
	    border-color: transparent transparent transparent #ffcd5c;
	    animation-delay: 5.8s;
	}
	
	@-webkit-keyframes star-ani {
	    0% {
	        opacity: 0;
	        transform: scale(0) rotate(0) translate3d(0,0,0);
	    }
	
	    50% {
	        opacity: 1;
	        transform: scale(1) rotate(0) translate3d(-200rpx,200rpx,0);
	    }
	
	    100% {
	        opacity: 0;
	        transform: scale(1) rotate(0) translate3d(-300rpx,300rpx,0);
	    }
	}
	
	@keyframes star-ani {
	    0% {
	        opacity: 0;
	        transform: scale(0) rotate(0) translate3d(0,0,0);
	    }
	
	    50% {
	        opacity: 1;
	        transform: scale(1) rotate(0) translate3d(-200rpx,200rpx,0);
	    }
	
	    100% {
	        opacity: 0;
	        transform: scale(1) rotate(0) translate3d(-300rpx,300rpx,0);
	    }
	}
</style>
